<template>
  <div class="post-misson">
    <div class="mall-header border-bottom">
      <div class="back-icon" @click="goBack">
        <i class="el-icon-arrow-left">返回</i>
      </div>
      <div class="mall-title">
        <p>发布</p>
      </div>
    </div>
    <div class="content-wrapper">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="85px">
        <el-form-item label="发布类型" prop="types">
          <el-select v-model="ruleForm.types" placeholder="请选择活动区域">
            <el-option label="请选择" value=""></el-option>
            <el-option label="快递代领" value="deliver"></el-option>
            <el-option label="二手书籍" value="book"></el-option>
            <el-option label="快递代寄" :disabled="true" value="help"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="物品名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="快递公司" prop="num">
          <el-input v-model="ruleForm.company"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" prop="num" >
          <el-input v-model="ruleForm.num"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input type="textarea" v-model="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item class="submit-btn">
          <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Post_mission",
    data () {
      return {
        is_Deliver: true,
        ruleForm: {
          types: '',
          name: '',
          company: '',
          num: '',
          desc: ''
        },
        rules: {
          types: [
            { required: true, message: '请选择发布类型', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入物品类型', trigger: 'blur' },
          ],
          company: [
            { required: true, message: '请输入快递公司', trigger: 'blur' },
          ],
          num: [
            { required: true, message: '请输入取货码', trigger: 'blur' },
          ]
        }
      }
    },
    watch: {
      is_Deliver () {
        const value = this.ruleForm.types;
        if (value == "deliver") {
          this.is_Deliver = true;
        }
        if (!value == "deliver") {
          this.is_Deliver = false;
        }
      }
    },
    methods: {
      goBack () {
        this.$router.push("/index")
      },
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            this.$message({
              message :'请输入必填内容',
              type: 'warning'
            });
          }
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  /* header */
  .mall-header {
    width: 100%;
    height: 50px;
    background: #fff;
  }
  .mall-title,.back-icon {
    float: left;
    color: #666;
    text-align: center;
  }
  .back-icon {
    width: 20%;
    line-height: 50px;
    font-size: 16px;
    z-index: 2;
    color: #1989fa;
  }
  .mall-title {
    width: 80%;
    line-height: 50px;
    font-size: 18px;
  }
  .mall-title p {
    margin: 0 20% 0 0;
  }
  /* 内容 */
  .content-wrapper {
    padding: 10px 15px;
  }
  .el-select {
    width: 100%;
  }
  .content-wrapper >>> .el-input__inner {
    height: 35px;
  }
  .content-wrapper >>>.submit-btn .el-form-item__content{
    margin-left: 0 !important;
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
  }
  .content-wrapper >>> .el-form-item__content .el-button{
    width: 100%;
  }
</style>
